<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动布局</title>
    <style>
        div {
            float: left;
            width: 150px;
            height: 200px;
            background-color: pink;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background-color: saddlebrown;
        }
        #first {
            font-size: 100px;
        }
        #first {
            color: seagreen;
        }
        .box {
            width: 1200px;
            height: 460px;
            background-color: rgb(228, 219, 220);
            margin: 0 auto;
        }
        .lef {
            float: left;
            width: 300px;
            height: 460px;
            background-color: purple;
        }
        .rig {
            float: right;
            width: 600px;
            height: 460px;
            background-color: rosybrown;
        }
    </style>
</head>
<body>
    <!-- 标准流(普通流/文档流) -->
    <!-- 
        1.块级元素会独占一行, 从上向下顺序排列
        常用元素: div hr p h1-h6 ul ol dl form table
        2.行内元素会按照顺序, 从左到右顺序排列, 碰到父元素边缘则自动换行
        常用元素:span a i em

        以上都是标准流布局, 我们前面学习的就是标准流, 标准流是最基本的布局方式.
        这三种布局方式都是用来摆放盒子的, 盒子摆放到合适位置, 布局自然就完成了.
     -->
     <div id="first">2</div>
     <div>3</div>
     <div>4</div>
     <!-- 
         为什么需要浮动?
            很多布局效果, 标准流没有办法完成, 此时就可以利用浮动完成布局, 因为浮动可以改变元素标签默认的排列方式
         浮动最典型的应用: 可以让多个块级元素一行内排列显示.

         网页布局第一准则: 多个块级元素纵向排列找标准流, 多个块级元素横向排列找浮动.
      -->
      <!-- 
          什么是浮动?
            float属性用于创建浮动框, 将其移动到一边, 直到左边缘或右边缘触及包含块或另一个浮动框的边缘
            float: none, left, right
       -->
       <div class="left">左青龙</div>
       <div class="right">右白虎</div>
       <!-- 浮动按照上沿对其 -->

       <!-- 
           浮动元素具有行内块元素的特性
           任何元素都可以浮动, 不管原先是什么模式的元素, 添加浮动之后具有行内块元素相似的特性
           1.如果块级盒子没有设置宽度, 默认宽度和父级一样宽, 但是添加浮动后, 它的大小根据内容来决定
           2.浮动的盒子中间是没有缝隙的, 是紧挨着一起的
           3.行内元素同理
        -->
        <!-- 
            为了约束浮动元素的位置, 我们网页布局一班采取的策略是
                先用标准流的父元素排列上下位置之后内部子元素采取浮动排列左右位置符合网页布局第一准则
         -->
        <div class="box">
            <div class="lef"></div>
            <div class="rig"></div>
        </div>

        <a href="http://www.baidu.com" target="_blank">baidu</a>
</body>
</html>